ওয়েব ডেভেলপমেন্টে ফাংশন (Functions), ইভেন্ট হ্যান্ডলিং (Event Handling), এবং DOM ম্যানিপুলেশন (Document Object Model Manipulation) অত্যন্ত গুরুত্বপূর্ণ বিষয়। এগুলো ব্যবহার করে ওয়েবসাইটে ইন্টারঅ্যাক্টিভ এবং ডায়নামিক ফিচার যুক্ত করা হয়।
ফাংশন (Functions)
ফাংশন হলো প্রোগ্রামিংয়ের একটি ব্লক, যা কোনো নির্দিষ্ট কাজ সম্পাদনের জন্য তৈরি করা হয়। ফাংশনকে বারবার ব্যবহার করা যায় এবং এটি কোড পুনরায় লেখার ঝামেলা কমায়।
ফাংশনের ধরন
ডিক্লারেশন ফাংশন (Function Declaration):
function greet() { console.log("Hello, World!"); } greet(); // Output: Hello, World!এক্সপ্রেশন ফাংশন (Function Expression):
const greet = function() { console.log("Hello, World!"); }; greet();অ্যারো ফাংশন (Arrow Function):
const greet = () => { console.log("Hello, World!"); }; greet();
ইভেন্ট হ্যান্ডলিং (Event Handling)
ইভেন্ট হ্যান্ডলিং হলো ব্যবহারকারীর ইন্টারঅ্যাকশন যেমন ক্লিক, হোভার, কী-প্রেস ইত্যাদি ঘটলে নির্দিষ্ট কাজ সম্পাদনের জন্য ফাংশনকে সংযুক্ত করা। JavaScript ব্যবহার করে ইভেন্ট হ্যান্ডলিং করা হয়।
ইভেন্ট হ্যান্ডলিং এর উদাহরণ
HTML:
<button id="myButton">Click Me</button>
JavaScript:
document.getElementById("myButton").addEventListener("click", function() {
alert("Button Clicked!");
});
addEventListener: এটি একটি ইভেন্ট হ্যান্ডলার যা নির্দিষ্ট ইভেন্টের জন্য ফাংশন ট্রিগার করে।
সাধারণ ইভেন্টগুলোর উদাহরণ
click: মাউস ক্লিক করলে কাজ করে।mouseover: মাউস কোনো এলিমেন্টের উপর গেলে কাজ করে।keydown/keyup: কীবোর্ডের কী চাপা বা ছাড়া হলে কাজ করে।submit: ফর্ম সাবমিট করলে কাজ করে।
DOM ম্যানিপুলেশন (Document Object Model Manipulation)
DOM (Document Object Model) হলো HTML ডকুমেন্টের একটি প্রোগ্রামেবল রূপ, যা JavaScript ব্যবহার করে ম্যানিপুলেট করা যায়। DOM এর মাধ্যমে ওয়েব পেজের কন্টেন্ট, স্টাইল এবং স্ট্রাকচার পরিবর্তন করা যায়।
DOM ম্যানিপুলেশনের প্রক্রিয়া
HTML এলিমেন্ট সিলেক্ট করা
const heading = document.getElementById("myHeading"); const paragraphs = document.querySelectorAll("p");এলিমেন্ট পরিবর্তন করা
HTML পরিবর্তন:document.getElementById("myHeading").innerText = "Welcome to My Website!";স্টাইল পরিবর্তন:
document.getElementById("myHeading").style.color = "blue";নতুন এলিমেন্ট যোগ করা
const newParagraph = document.createElement("p"); newParagraph.innerText = "This is a new paragraph."; document.body.appendChild(newParagraph);এলিমেন্ট মুছে ফেলা
const element = document.getElementById("myHeading"); element.remove();
ফাংশন, ইভেন্ট হ্যান্ডলিং এবং DOM একসাথে ব্যবহারের উদাহরণ
HTML:
<h1 id="myHeading">Hello, World!</h1>
<button id="changeText">Change Text</button>
JavaScript:
document.getElementById("changeText").addEventListener("click", function() {
const heading = document.getElementById("myHeading");
heading.innerText = "Text Changed!";
heading.style.color = "green";
});
ফলাফল:
- ক্লিক করার পর, হেডিংয়ের টেক্সট পরিবর্তন হবে এবং রঙ সবুজ হয়ে যাবে।
সারসংক্ষেপ
- ফাংশন: কোডের পুনরায় ব্যবহার নিশ্চিত করে এবং নির্দিষ্ট কাজ সম্পাদনের জন্য ফাংশন তৈরি করা হয়।
- ইভেন্ট হ্যান্ডলিং: ব্যবহারকারীর ইন্টারঅ্যাকশনের সময় নির্দিষ্ট কাজ করার জন্য ফাংশন সংযুক্ত করা হয়।
- DOM ম্যানিপুলেশন: JavaScript ব্যবহার করে HTML পেজের স্ট্রাকচার, কন্টেন্ট এবং স্টাইল পরিবর্তন করা যায়।
ফাংশন, ইভেন্ট হ্যান্ডলিং এবং DOM ম্যানিপুলেশন একসাথে ব্যবহার করে ডায়নামিক ও ইন্টারঅ্যাক্টিভ ওয়েবসাইট তৈরি করা সম্ভব।
Read more
